<div class="" ng-controller="validateCtrl as mc" ng-cloak="">
    <tabset>
        <tab heading="示例">
            <h5>下面是表单验证的方法</h5>
          <!--  <ng-include src="vm.showFormValidate(health)"></ng-include>-->
            <form class="form-horizontal w5c-form demo-form" role="form" style="width: auto;height:1200px!important;"
                  w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
                <div class="form-group">
                    <label class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input type="email" name="email" ng-model="vm.entity.email" required="" class="form-control"
                               placeholder="输入邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">日期</label>
                    <div class="col-sm-10">
                        <wi-datepicker ng-model="date1" name="date1" required=""></wi-datepicker>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">范围输入框</label>
                    <div class="col-sm-10">
                        Model as range: <input type="range"  name="range" ng-model="value" min="{{min | number}}"  max="{{max| number}}">
                        <hr>
                        Model as number: <input type="number" string-to-number  ng-model="value"><br>
                        Min: <input type="number" ng-model="min"><br>
                        Max: <input type="number" ng-model="max"><br>
                        value = <code>{{value}}</code><br/>
                        validateForm.range.$valid = <code>{{validateForm.range.$valid}}</code><br/>
                        validateForm.range.$error = <code>{{validateForm.range.$error}}</code>
                        <input type="time" id="exampleInput" name="input" ng-model="example.value"
                               placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">颜色选择</label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="favoriteColors" ng-model="vm.entity.favoriteColors.red" > 红
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="favoriteColors" ng-model="vm.entity.favoriteColors.blue"> 蓝
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="favoriteColors" ng-model="vm.entity.favoriteColors.green"> 绿
                    </label>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">下拉框单选</label>
                    <div class="col-sm-10">
                         <oi-select
                             name="select"
                             oi-options="item.name for item in shopArr track by item.id"
                             ng-model="bundle"
                             required=""
                             placeholder="请选择">
                         </oi-select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">下拉框多选</label>
                    <div class="col-sm-8">
                         <oi-select
                                    oi-options="item.name for item in shopArr track by item.id"
                                    ng-model="bundle"
                                    ng-disabled="disabled"
                                    multiple
                                    placeholder="请选择"
                                    ></oi-select>
                    </div>
                    <div class="col-sm-2">
                     <button class="btn btn-default" ng-init="disabled = true" ng-click="disabled = !disabled">{{disabled ? 'on' : 'off'}}</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">下拉树</label>
                    <div class="col-sm-8">
                        <multi-select-tree data-input-model="data"
                                           multi-select="true"
                                           data-output-model="selectedItem2"
                                           data-default-label="Click here to Select..."
                                           data-callback="selectOnly1Or2(item, selectedItems)"
                                           data-select-only-leafs="true"
                                           data-switch-view-callback="switchViewCallback(scopeObj)"
                                           data-switch-view-label="test1"
                                           data-switch-view="true">
                            </multi-select-tree>
                       <!-- <br/>Selected items: {{selectedItem2}}-->
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>

                    <div class="col-sm-10">
                        <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="vm.entity.name"
                               w5c-unique-check="{url:'http://www.ngnice.com/api/test/user/name/check?name='+vm.entity.name}"
                               class="form-control" name="username" placeholder="输入用户名（输入why520crazy验证存在）">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>

                    <div class="col-sm-10">
                        <input type="password" required="" ng-model="vm.entity.password" name="password"
                               class="form-control" ng-minlength="5" ng-maxlength="15"
                               placeholder="输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">重复密码</label>

                    <div class="col-sm-10">
                        <input type="password" required="" w5c-repeat="password" ng-model="vm.entity.repeatPassword"
                               name="repeatPassword"
                               class="form-control"
                               placeholder="重复密码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">数字</label>

                    <div class="col-sm-10">
                        <input type="number" required="" ng-model="vm.entity.number" name="number" class="form-control"
                               placeholder="输入数字（10-15）" max="15" min="10">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">URL</label>

                    <div class="col-sm-10">
                        <input type="url" required="" ng-model="vm.entity.url" name="url" class="form-control"
                               placeholder="输入URL">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">类型</label>

                    <div class="col-sm-10">
                        <select class="form-control" ng-model="vm.entity.type" required name="type"
                                ng-options="type.text for type in vm.types">
                            <option value="">---请选择---</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">多行框</label>
                    <div class="col-sm-10">
             <textarea
                 ng-model="content"
                 placeholder="输入文本"
                 required=""
                 name="area">
             </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">是否可用</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" ng-model="vm.entity.isAvailable" name="isEnable" required="" value="Y" ng-checked="true"> 可用
                        </label>
                        <label class="radio-inline">
                            <input type="radio" ng-model="vm.entity.isAvailable" name="isEnable" required="" value="N"> 不可用
                        </label>
                    </div>
                </div>
                <div class="form-group" ng-show="validateForm.$errors.length > 0 && vm.showErrorType == 2">
                    <label class="col-sm-2 control-label"></label>

                    <div class="col-sm-10">
                        <div class="alert alert-danger">
                            <ui>
                                <li ng-repeat="error in validateForm.$errors track by $index">
                                    {{error}}
                                </li>
                            </ui>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="buttom" w5c-form-submit="vm.saveEntity($event)" class="btn btn-success"> 验证</button>
                        <button type="buttom" ng-click="validateForm.reset()" class="btn btn-default"> 重置</button>
                    </div>
                </div>

            </form>
        </tab>
    </tabset>
</div>
